<template>
  <div class="top-text">
    <i class="el-icon-star-off"></i>
    <span>{{ titleInfo }}</span>
    <i class="el-icon-star-off"></i>
  </div>
  <div class="search-form">
    <form action="">
      <div class="searchFrom" v-for="(item, index) in formData" :key="index">
        <p>{{ item.title }}</p>
        <div
          v-show="item.moreSearch.isMoreSearch"
          v-for="(child, y) in item.moreSearch.moreSearchData"
          :key="y"
        >
          <!-- <input id="type" type="text" list="typelist" :placeholder="item.pla" />
      <datalist id="typelist">
        <option v-for="(grand, z) in child.list" :key="z">{{ grand }}</option>
      </datalist> -->
          <el-select v-model="child.value" clearable :placeholder="child.pla">
            <el-option
              v-for="item in child.list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div v-show="item.remark.isRemark">
          <el-input
            v-model="item.remark.input"
            :placeholder="item.remark.pla"
            class="remark-input"
          ></el-input>
        </div>
        <div v-show="item.section.isSection">
          <el-input
            v-model="item.section.input"
            class="section-input"
          ></el-input>
          <span>----</span>
          <el-input
            v-model="item.section.input"
            class="section-input"
          ></el-input>
        </div>
        <!-- <div v-show="item.static.isStatic">
          <el-radio-group v-model="item.static.dataStatic.radio1">
            <el-radio-button
              :label="item.static.dataStatic.radio1"
            ></el-radio-button>
            <el-radio-button
              :label="item.static.dataStatic.radio2"
            ></el-radio-button>
            <el-radio-button
              :label="item.static.dataStatic.radio3"
            ></el-radio-button>
          </el-radio-group>
        </div> -->
      </div>
      <div class="searchFrom-bottom">
        <input
          type="submit"
          name=""
          id=""
          value="开始搜索"
          class="searchStart"
        />
        <i class="el-icon-search"></i>
        <input
          type="reset"
          name=""
          id=""
          value="清空条件"
          class="searchReset"
        />
        <i class="el-icon-refresh-left"></i>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "SearchFrom",
  props: {
    formData: {
      type: Array,
    },
    titleInfo: {
      type: String,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.searchFrom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 7px;
}
.search-form {
  margin-top: 30px;
}
.searchFrom > p {
  width: 100px;
  font-size: 17px;
  color: #151515;
  font-weight: 400;
}
.remark-input {
  width: 442px;
}
.section-input {
  width: 143px;
}
.section-input + span {
  margin: 0px 5px;
}
.searchStart {
  width: 225px;
  height: 44px;
  background-color: rgb(250, 76, 29);
  color: #fff4f1;
  border: #fff4f1;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 17px;
}
.searchReset {
  width: 225px;
  height: 44px;
  color: #7d7d7d;
  background-color: #ffffff;
  border: 1px solid #d1d1d1;
  cursor: pointer;
  border-radius: 4px;
}
.searchFrom-bottom {
  text-align: center;
  margin-top: 35px;
  position: relative;
  margin-bottom: 30px;
}
.el-icon-refresh-left {
  position: relative;
  left: -77px;
  top: 2px;
  font-size: 20px;
  color: #7d7d7d;
}
.el-icon-search {
  position: relative;
  left: -91px;
  top: 2px;
  font-size: 20px;
  color: #fff4f1;
}
.top-text {
  text-align: center;
}
.top-text > span {
  color: #151515;
  margin: 0 13px;
  font-size: 23px;
  font-weight: 600;
}
.el-icon-star-off {
  color: rgb(250, 76, 29);
  font-weight: 600;
  font-size: 18px;
}
/deep/.el-input__inner {
  border-radius: 28px;
  height: 32px;
}
/deep/ .el-select {
  margin-right: 17px;
}
</style>